<template>
  <div class="slideshow">
    <store-leftmenus active="4"></store-leftmenus>
    <div class="slideshow-main">
      <Breadcrumb :title="title"></Breadcrumb>
      <div class="slideshow-main_content">
        <div>
          <div class="contenttitle">店铺轮播</div>
          <div class="slideshow-main_contentFirst">
            <div class="main_contentFirst-header">
              <el-button type="primary" @click="freightAdd(-1)">添 加</el-button>
            </div>
            <el-table :data="tableData" border style="width: 100%" v-loading="loading">
              <el-table-column type="index" label="序号" width="55" align="center"></el-table-column>
              <el-table-column prop="title" label="名称"></el-table-column>
              <el-table-column prop="type" label="类型">
                <span slot-scope="scope">{{scope.row.type==1?"视频":(scope.row.type ==2?"广告图":"商品")}}</span>
              </el-table-column>
              <el-table-column prop="banner" label="地址"></el-table-column>
              <el-table-column prop="goodName" label="商品名称"></el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button size="mini" type="danger" @click="freightDelete(scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
    <el-dialog title="添加轮播内容" :visible.sync="dialogVisible" width="30%">
      <span>
        <div class="dialog-input">
          <p>名称：</p>
          <el-input type="text" placeholder="请输入模板名称" v-model="storeFreightTemDto.name"></el-input>
        </div>
        <div class="dialog-input">
          <p>类型：</p>
          <el-radio v-model="radio" :label="2" @change="radioChange">图片</el-radio>
          <el-radio v-model="radio" :label="1" @change="radioChange">视频</el-radio>
          <div @click="radioChange">
            <el-radio v-model="radio" :label="3" @change="radioChange">商品</el-radio>
          </div>
        </div>
        <div class="dialog-input">
          <p>图片/视频：</p>
          <img v-if="imgState" :src="imgurl" alt width="150px" />
          <el-upload
            class="avatar-uploader"
            :action="BASE_URL"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :headers="{'Authorization':Authorization}"
            :data="{'folderName':'shop'}"
            v-else
          >
            <div v-if="imgurl">
              <img v-if="radio == 2" :src="imgurl" class="avatar" />
              <video v-if="radio == 1" :src="imgurl" width="240" autoplay controls loop></video>
            </div>
            <div v-else class="upimg">
              <i class="el-icon-plus avatar-uploader-icon"></i>
            </div>
          </el-upload>
        </div>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="sendOver">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog :visible.sync="dialogVisible1" width="800px" class="traceabDia company">
      <span>
        <el-table :data="shopList" style="width: 100%" border v-loading="loading">
          <el-table-column prop="pic" label="商品图片" align="center" width="100">
            <template slot-scope="scope">
              <el-popover placement="right" title trigger="hover" prop="authSfzzm">
                <img :src="scope.row.pic" style="width: 300px;" lazy />
                <img slot="reference" :src="scope.row.pic" alt style="height:70px;width:70px" lazy />
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="商品名称" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column prop="categoryName" label="商品类别">
            <span
              slot-scope="scope"
            >{{scope.row.category1Name?(scope.row.category1Name+'/'):''}}{{scope.row.category2Name?(scope.row.category2Name+'/'):''}}{{scope.row.category3Name?(scope.row.category3Name):''}}</span>
          </el-table-column>
          <el-table-column prop="price" label="总价"></el-table-column>
          <el-table-column prop="stocks" label="库存"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" plain @click="selectGoods(scope.row)">选择</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          class="paging"
          align="right"
          @current-change="handleCurrentChange"
          :current-page.sync="page"
          hide-on-single-page
          :page-size="10"
          layout="prev, pager, next, jumper"
          :total="count"
        ></el-pagination>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import StoreLeftmenus from "@/views/components/StoreLeftmenus";
import Breadcrumb from "@/views/components/Breadcrumb";
import { mapState } from "vuex";
import { BASE_URL } from "@/utils/service.js";
export default {
  data() {
    return {
      title: {
        group: "店铺管理",
        name: "店铺轮播",
      },
      BASE_URL,
      tableData: [],
      loading: false,
      loading1: false,
      dialogVisible: false,
      dialogVisible1: false,
      storeFreightTemDto: {
        name: "",
      },
      radio:2,
      imgurl: "",
      Authorization: "",
      page: 1,
      count: null,
      shopList: [],
      row: {},
      imgState: false,
    };
  },
  created() {
    this.Authorization = localStorage.getItem("intrachaincode");
    this.getStoreBanner();
  },
  methods: {
    selectGoods(row) {
      this.row = row;
      this.imgurl = row.pic;
      this.imgState = true;
      this.dialogVisible1 = false;
    },
    radioChange() {
      this.imgurl = "";
      if (this.radio == 3) {
        this.loading1 = this.$loading({
          lock: true,
          spinner: "el-icon-loading",
          background: "rgba(255, 255, 255, 0.7)",
        });
        this.getGoodsList();
      } else {
        this.imgState = false;
      }
    },
    async getStoreBanner() {
      const res = await this.axios.getStoreBanner(this.print.storeId);
      this.tableData = res.data.data;
    },
    async deleteStoreBanner(id) {
      const res = await this.axios.deleteStoreBanner(id);
      if (res.data.code == 200) {
        this.$message({
          message: "删除成功",
          type: "success",
          duration: 1500,
          onClose: () => {
            this.getStoreBanner();
          },
        });
      } else {
        this.$message.warning(res.data.message);
      }
    },
    async getGoodsList() {
      // 获取商品列表
      let obj = {
        storeId: parseInt(this.print.id),
        status: 3,
        page: this.page,
      };
      const res = await this.axios.getGoodsList(obj);
      if (res.data.code == 200) {
        this.loading1.close();
        this.shopList = res.data.data.list;
        this.dialogVisible1 = true;
        this.row = {};
        this.count = res.data.data.totalCount;
      }
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getGoodsList();
    },
    async sendOver() {
      let obj = {
        banner: this.imgurl,
        goodName: this.row.name || null,
        goodsId: this.row.id || null,
        storeId: this.print.storeId,
        title: this.storeFreightTemDto.name,
        type: this.radio,
      };
      const res = await this.axios.addStoreBanner(obj);
      if (res.data.code == 200) {
        this.$message({
          message: "添加成功",
          type: "success",
          duration: 1500,
          onClose: () => {
            this.dialogVisible = false;
            this.getStoreBanner();
          },
        });
      } else {
        this.$message.warning(res.data.message);
      }
    },
    handleAvatarSuccess(res, file) {
      this.imgurl = res.data.url;
    },
    freightDelete(row) {
      // 点击删除
      this.$confirm("确认删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.deleteStoreBanner(row.id);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    freightAdd() {
      // 打开添加弹窗
      this.storeFreightTemDto = {
        name: "",
      };
      this.imgurl = "";
      this.radio = 2;
      this.imgState = false;
      this.dialogVisible = true;
    },
  },
  components: {
    StoreLeftmenus,
    Breadcrumb,
  },
  computed: {
    ...mapState({
      print: (state) => state.print.all,
    }),
  },
};
</script>

<style lang="scss" scoped>
.slideshow {
  display: flex;
  justify-content: center;
  .slideshow-main {
    width: 1100px;
    background-color: #fff;
    padding: 10px;
    .slideshow-main_content {
      border: 1px solid rgba(229, 230, 234, 1);
      border-top: 0;
      margin: 15px 0;
      .contenttitle {
        box-sizing: border-box;
        padding: 10px;
        line-height: 28px;
        font-weight: bold;
        height: 50px;
        background-color: rgba(245, 245, 245, 1);
        border-top: 2px solid rgba(176, 184, 184, 1);
      }
      .slideshow-main_contentFirst {
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 20px;
        .main_contentFirst-header {
          padding: 10px 0;
        }
      }
    }
  }
  .dialog-input {
    display: flex;
    margin-bottom: 15px;
    align-items: center;
    p {
      min-width: 80px;
      line-height: 40px;
      margin-left: 5px;
    }
  }
  /deep/ .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  /deep/ .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  /deep/ .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 125px;
    height: 125px;
    line-height: 125px;
    text-align: center;
  }
  /deep/ .avatar {
    width: 125px;
    height: 125px;
    display: block;
  }
  /deep/ .el-dialog__body {
    padding: 10px 20px;
  }
}
</style>
